<template>
  <div>   
    <div class="bg"></div>
    <div class="container" >
      
      <el-form ref="form" :model="form" label-width="80px" class="form">
        <el-form-item  style="padding-left: 30%" >
          <span slot="label" style="font-size: 30px;">标题</span>
          <el-input v-model="form.name" style="width: 50%;" disabled></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <!-- 遍历已创建的选项渲染 -->
        <div class="item" v-for="(item, index) in form.itemList" :key="index">
          <el-form-item :label="(index+1)+''">
            <div class="item_title">
              <span>、{{typeMap[item.type]}}: </span>
              <span v-text="item.title"></span>
            </div>
            <!-- 单项填空 -->
            <div v-if="item.type==='input'">
              <el-input v-model="item.value" class="disabled" placeholder="请输入"></el-input>
            </div>
            <!-- 单选 -->
            <div v-else-if="item.type==='radio'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <el-radio v-model="item.value" :label="(i+1)">  </el-radio>
                <el-input v-model="item.textList[i]" disabled style="padding-left: 10px"></el-input>
              </div>
            </div>
            
            <!-- 多选 -->
            <div v-else-if="item.type==='checkbox'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <el-checkbox v-model="item.value[i]" :label="(i+1)">  </el-checkbox>
                <el-input v-model="item.textList[i]" disabled style="padding-left: 10px"></el-input>
              </div>
            </div>

            <!-- 选择填空 -->
            <div v-else-if="item.type === 'select'">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="(elm, i) in item.textList" :key="i"
                  :label="item.textList[i]"
                  :value="i+''">
                </el-option>
              </el-select>
            </div>

            <!-- 矩阵填空 -->
            <div v-else-if="item.type==='matrix'">
              <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                <span> {{item.textList[i]}}：</span>
                <el-input class="disabled" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
        </div>
        <el-divider></el-divider>
        <el-form-item  style="padding-left: 35%;padding-bottom: 5%;" >
          <el-button type="primary" @click="onSubmit" round >提交</el-button>
        </el-form-item>
        <section class="remind">
          <el-form-item style="margin-left: -80px;margin-bottom: -5px;">
            <p>倒计时：{{hour}}:{{minute}}:{{second}}</p>
          </el-form-item>
        </section>
        </el-form>
      </div>  
  </div>   
</template>
<script>
export default{
  data(){
    return{
      id: null,
      type: null,
      group_id: null,
      hours: 1,
      minutes: 10,
      seconds: 0,
      value: '',
      matrixsNum: 1,
      num: 1,
      form: {
        itemList: [],
        name: '',
        date: '',
        num: ''
      },
      typeMap: {
        radio: '单选',
        checkbox: '多选',
        input: '问答',
        matrix: '矩阵问答',
        select: '选择'
      },
    }
  },
  created() {
    const id = this.$route.query.id;
    const type = this.$route.query.type;
    this.type = type;
    if(id == undefined || id == null){
      const Dataform = JSON.parse(this.$route.query.form);
      const daterc = Dataform.date
      if (daterc != null) {
          var date = new Date(daterc);
          var year = date.getFullYear();
          /* 在日期格式中，月份是从0开始，11结束，因此要加0
          * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
          * */
          var hours = date.getHours();
          var minutes = date.getMinutes();
          var seconds = date.getSeconds();
          if(this.hours != NaN & this.minutes != NaN & this.seconds != NaN){
            // console.log(type(this.seconds))
            this.hours = hours;
            this.minutes = minutes;
            this.seconds = seconds;
          }
      }
      this.form = Dataform
    }else{
      this.id = id;
      this.$axios({
            url: `/api/findQuestionnaireById`,
            method: 'post',
            data: {
              id: id
            }
          }).then(res=>{
            console.log(res.data)
            var question = res.data.data;
            var date = new Date(question.answerTime);
            this.form.date = date;
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            if(this.hours != NaN & this.minutes != NaN & this.seconds != NaN){
              // console.log(type(this.seconds))
              this.hours = hours;
              this.minutes = minutes;
              this.seconds = seconds;
            }
            this.form.name = question.questionName;
            this.form.num = question.answerTotal;
            this.form.itemList = JSON.parse(question.questionContent);
            this.group_id = question.groupId;
          })
    }


  },
  mounted() {
    this.add();
  },
     
  methods: {
    onSubmit(){
      console.log(this.form)
      var submitForm = {
        answerList: JSON.stringify(this.form.itemList),
        name:this.form.name,
        answerBelong: this.$cookies.get('cid'),
        questionnaireId: this.id,
        groupId: this.group_id
      }
      console.log(submitForm)
      if(this.type != null){
              this.$message({
                showClose: true,
                type: 'error',
                message: '预览界面，无法提交',
              })
      }else{
        this.$axios({
            url: `/api/addAnswer`,
            method: 'post',
            data: {
              ...submitForm
            }
          }).then(res=>{
            console.log(res)
            if(res.data.code == 400){
              this.$message({
                showClose: true,
                type: 'error',
                message: res.data.message,
              })
            }else{
              this.$message({
                showClose: true,
                type: 'success',
                message: '问卷提交成功',
              })
            }

          })
      }

    
    
    },
    number(n) {
        return n < 10 ? '0' + n : '' + n
    },
    // 倒计时函数
    add() {
        let time = window.setInterval( ()=> {
            if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
                this.hours -= 1;
                this.minutes = 59;
                this.seconds = 59;
            } else if (this.hours === 0 && this.minutes !== 0 && this.seconds ===
                0) {
                this.minutes -= 1;
                this.seconds = 59;
            } else if (this.hours === 0 && this.minutes === 0 && this.seconds ===
                0) {
                this.seconds = 0
                window.clearInterval(time)
            } else if (this.hours !== 0 && this.minutes !== 0 && this.seconds ===
                0) {
                this.minutes -= 1;
                this.seconds = 59;
            } else {
                this.seconds -= 1;
            }
        }, 1000)
    }
},
watch: {
    // 监听数值变化
    second: {
        handler(newVal) {
          this.$options.methods.number(newVal)
        }
    },
    minute: {
        handler(newVal) {
          this.$options.methods.number(newVal)
        }
    },
    hour: {
        handler(newVal) {
          this.$options.methods.number(newVal)
        }
    }
},
computed: {
    // 初始化数据
    second() {
        return this.$options.methods.number(this.seconds)
    },
    minute() {
        return this.$options.methods.number(this.minutes)
    },
    hour() {
        return this.$options.methods.number(this.hours)
    }
}
  
}
</script>
<style lang="less" scoped>
.warp{
  display: flex;
  align-items: center;
}
.disabled{
  background: #F5F7FA;
}
input{
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  margin: 10px 0 0;
}
.el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 0;
}

  .remind {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 20px;
  bottom: 60%;
  flex-direction: column;
  color: #606266;
  background-color: #fff;
  border: 4px solid #e77a7a;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}  
.submit {
  border-radius: 4px;
  padding: 10px 20px;
  display: flex;
  position: fixed;
  right: 10px;
  bottom: 60%;
  flex-direction: column;
  // color: #606266;
  // background-color: #fff;
  // border-left: 4px solid #409eff;
  // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
  
}  
.type {
  font-size: 40px;
  font-weight: 100px;
  margin-left: -80px;
}

.form{
  padding-left: 5% ;
  padding-top: 5%;
  width: 700px;
}

.container {
    left: 25%;
    border-radius: 2px;
    border: 1px solid rgba(217,217,217,1);
    width: 800px;
    padding-bottom: 5px;
    margin: 0;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0 2px 5px 0 #d9d9d9;
    position: relative;
}

#nav {

   
}
#nav ul {
    list-style: none;
}
#nav li {
    display: inline;
  }
#nav a {
    color : rgb(0, 0, 0);
    text-decoration : none;padding : 0 20px;
}
#nav a:hover {
    border-bottom: 2px solid #409eff;
}


 .bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: url('../../assets/img/loginbg.png')center top / cover no-repeat;
  background-color: #b6bccdd1 !important;
}

</style>
